'use client'

import { useEffect, useRef } from 'react'

export default function LineCanvas() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext('2d', { alpha: true })
    if (!ctx) return

    const CENTER_X_FACTOR = 0.82,
      CENTER_Y_FACTOR = 0.48
    const RINGS = 10,
      MAX_R = 1500,
      BASE_OPA = 0.16,
      GLOW = 4
    const ROT_NEAR = 0.001,
      ROT_FAR = 0.00035
    const SPEED_NEAR = 1.0,
      SPEED_FAR = 0.25
    const V_STRENGTH = 380,
      H_DRIFT = 0

    let w = 0,
      h = 0,
      cx = 0,
      cy = 0,
      dpr = 1,
      t = 0
    const rings = []

    const resize = () => {
      const wrap = document.querySelector('.cosmosWrap')
      if (!wrap) return
      const r = wrap.getBoundingClientRect()
      w = r.width
      h = r.height
      dpr = Math.min(window.devicePixelRatio || 1, 2)
      canvas.width = Math.max(1, Math.round(w * dpr))
      canvas.height = Math.max(1, Math.round(h * dpr))
      cx = w * CENTER_X_FACTOR * dpr
      cy = h * CENTER_Y_FACTOR * dpr
    }

    const init = () => {
      rings.length = 0
      for (let i = 0; i < RINGS; i++) {
        const z = i / (RINGS - 1)
        const r = (0.22 + z * 0.78) * MAX_R
        rings.push({
          z,
          r: r * (0.94 + Math.random() * 0.12),
          lw: (2.4 - z * 1.6) * dpr,
          rot: Math.random() * Math.PI * 2,
          rotSpeed: (ROT_NEAR + (ROT_FAR - ROT_NEAR) * z) * (Math.random() < 0.5 ? -1 : 1),
          ecc: 0.1 + z * 0.2,
          phase: Math.random() * Math.PI * 2,
          scrollMul: SPEED_NEAR + (SPEED_FAR - SPEED_NEAR) * z
        })
      }
    }

    const strokeFor = (alpha) => {
      const g = ctx.createLinearGradient(0, 0, canvas.width, 0)
      g.addColorStop(0, `rgba(124,92,255,${alpha})`)
      g.addColorStop(1, `rgba(34,211,238,${alpha})`)
      ctx.strokeStyle = g
    }

    const drawRing = (r, f) => {
      const breath = Math.sin(t * 0.0016 + r.phase) * 1.0
      const rx = r.r + breath
      const ry = r.r * (1 - r.ecc) + breath
      const offX = f * H_DRIFT * r.scrollMul * dpr
      const offY = f * V_STRENGTH * r.scrollMul * dpr

      ctx.save()
      ctx.translate(cx + offX, cy + offY)
      ctx.rotate(r.rot)
      ctx.globalAlpha = 0.92
      ctx.lineWidth = r.lw
      strokeFor(BASE_OPA * (1.0 - r.z * 0.45))
      ctx.shadowBlur = GLOW * (1.2 - r.z * 0.7)
      ctx.shadowColor = 'rgba(124,92,255,0.3)'
      ctx.save()
      ctx.scale(1, ry / Math.max(rx, 1e-6))
      ctx.beginPath()
      ctx.arc(0, 0, rx, 0, Math.PI * 2)
      ctx.stroke()
      ctx.restore()
      ctx.restore()
      ctx.globalAlpha = 1
    }

    const drawFrame = (f) => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      for (const ring of rings) {
        drawRing(ring, f)
      }
    }

    const loop = () => {
      t += 16
      for (const ring of rings) ring.rot += ring.rotSpeed
      drawFrame(0.5)
      requestAnimationFrame(loop)
    }

    resize()
    init()
    loop()

    window.addEventListener('resize', resize)
    return () => {
      window.removeEventListener('resize', resize)
    }
  }, [])

  return <canvas ref={canvasRef} className="w-full h-full"></canvas>
}
